<script lang="ts" setup>
import { getAddressAPI } from '@/api/address'

definePage({
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '地址列表',
  },
})
const list = ref<any>([])
const address_id = ref<any>('')
function back() {
  uni.navigateBack()
}
onShow(() => {
  getAdd()
  if (uni.getStorageSync('address')) {
    address_id.value = uni.getStorageSync('address').id
  }
})
async function getAdd() {
  const data = await getAddressAPI(1)
  list.value = data
}
// 添加地址
function handleAdd() {
  uni.navigateTo({
    url: '/pages/address/add',
  })
}

// 编辑
function handleEdit(item: any) {
  uni.navigateTo({
    url: `/pages/address/add?query=${encodeURIComponent(JSON.stringify(item))}`,
  })
}
// 选择地址
function chooseAddress(item: any) {
  uni.setStorageSync('address', item)
  uni.navigateBack()
}
</script>

<template>
  <view>
    <wd-navbar
      safeareainsettop left-arrow placeholder fixed :bordered="false" title="地址管理"
      @click-left="back"
    />
    <view v-if="!list.length" class="box">
      <wd-img
        height="180rpx" mode="heightFix"
        src="https://cdn.hnqingnai.com/prod/shouliaot/file/ic_address_not.webp"
      />
      <view class="label">
        还没有收货地址哦，赶紧添加吧~
      </view>
    </view>
    <!-- 地址列表 -->
    <view v-else class="list">
      <view v-for="item in list" :key="item.id" class="list-item" @click="chooseAddress(item)">
        <view class="list-item-radio" :class="[item.id === address_id ? 'active' : '']" />
        <view class="main">
          <view class="top">
            <text class="name">{{ item.name }}</text><text>{{ item.telephone }}</text>
          </view>
          <view class="address">
            {{ item.address }}
          </view>
        </view>
        <view class="edit" @click.stop="handleEdit(item)">
          编辑
        </view>
      </view>
    </view>
    <wd-button custom-class="footer" type="success" size="large" icon="add" @click="handleAdd">
      新增收货地址
    </wd-button>
  </view>
</template>

<style lang="scss">
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .label {
    margin-top: 10rpx;
    color: #c0c0c0;
  }
}

.list {
  padding: 10rpx;

  &-item {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-radio {
      width: 24rpx;
      height: 24rpx;
      border: 3rpx solid #c0c0c0;
      border-radius: 50%;
      margin-right: 14rpx;
    }

    .main {
      flex: 1;
      font-size: 30rpx;

      .top {
        margin-bottom: 10rpx;

        .name {
          margin-right: 10rpx;
        }
      }

      .address {
        color: #c8c7cc;
      }
    }

    .edit {
      padding: 20rpx;
      color: #c8c7cc;
      font-size: 34rpx;
      border-left: 2rpx solid #c0c0c0;
    }

    .active {
      background-color: #34d19d;
      border: none;
    }
  }
}

.footer {
  position: fixed !important;
  bottom: 20rpx;
  left: 30rpx;
  right: 30rpx;
}
</style>
